<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>按钮样式</title>
        <style>
        .box-input {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1rem;
            font-size: 0;
            background-color: #edeef1
        }

        .box-comment {
            position: relative;
            display: inline-block;
            margin: .15rem 0 0 .2rem;
            width: 6rem;
            height: .7rem;
            line-height: .7rem;
            background-color: #fff;
            border-radius: 4px
        }

        .box-comment input {
            border: none;
            outline: 0;
            width: 100%;
            height: 100%;
            text-indent: .1rem;
            font-size: .34rem;
            color: #333
        }

        #surplusNum {
            position: absolute;
            right: .1rem;
            color: #e32c31;
            font-size: .26rem
        }

        .btn-send {
            display: inline-block;
            width: 1rem;
            height: .7rem;
            line-height: .7rem;
            font-size: .34rem;
            color: #333;
            text-align: center;
            margin-left: .2rem;
            background-color: #fff;
            border-radius: 4px
        }
        </style>
    </head>
    <body>
        <div class="box-input" id="boxInput">
            <div class="box-comment">
                <input id="comment" type="text">
                <span id="surplusNum">15</span>
            </div>
            <span id="btnSend" class="btn-send">发送</span>
        </div>
    </body>
</html>